<template>
  <view>
    <view class="picker-modal" v-if="showPicker"></view>
    <view
      class="picker-content"
      :style="{ transform: showPicker ? 'translateY(0)' : 'translateY(100%)' }"
    >
      <view class="picker-header">
        <view
          :style="{ color: cancelColor, fontSize: cancleFontSize }"
          v-if="cancelType == 'text'"
          @click="_close"
          >取消</view
        >
        <icon type="clear" size="18" v-else @click="_close" />
        <view
          class="packer-title"
          :style="{ color: titleColor, fontSize: titleFontSize }"
          >{{ title }}</view
        >
        <view
          :style="{
            color: confirmColor,
            fontSize: confirmFontSize,
            fontWeight: confirmFontWeight,
          }"
          @click="__confirmPicker"
          >确定</view
        >
      </view>
      <picker-view
        indicator-style="height: 90rpx;"
        class="picker-view"
        :value="pickerValue"
        @change="changePicker"
      >
        <picker-view-column>
          <view
            class="picker-item"
            :style="{ fontSize: itemFontSize }"
            v-for="(item, index) in pickerList"
            :key="index"
            >{{ item.label }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    cancelColor: {
      // 取消按钮颜色
      type: String,
      default: "#808080",
    },
    cancelType: {
      // text显示文字，icon显示图片
      type: String,
      default: "text",
    },
    cancleFontSize: {
      //取消文字大小
      type: String,
      default: "28rpx",
    },
    title: {
      //标题文字
      type: String,
      default: "",
    },
    titleColor: {
      //标题文字颜色
      type: String,
      default: "",
    },
    titleFontSize: {
      //标题文字大小
      type: String,
      default: "26rpx",
    },
    confirmColor: {
      // 确定按钮颜色
      type: String,
      default: "",
    },
    confirmFontSize: {
      //确定文字大小
      type: String,
      default: "28rpx",
    },
    confirmFontWeight: {
      //确定按钮的字体粗细
      type: String,
      default: "",
    },
    itemFontSize: {
      //选项文字大小
      type: String,
      default: "28rpx",
    },
    pickerList: {
      //数据
      type: Array,
    },
  },
  data() {
    return {
      showPicker: false,
      pickerValue: [0],
    };
  },
  methods: {
    _close() {
      this.showPicker = false;
    },
    _open() {
      this.showPicker = true;
    },
    //确定
    __confirmPicker() {
      this.showPicker = false;
      let checkedValue = this.pickerList[this.pickerValue].value;
      let checkedLabel = this.pickerList[this.pickerValue].label;
      this.$emit("onConfirm", { value: checkedValue, label: checkedLabel });
    },
    //滑动picker
    changePicker(e) {
      this.pickerValue = e.detail.value;
    },
  },
};
</script>

<style>
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  transition: all 0.3s;
}
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}
.packer-title {
  text-align: center;
}
.picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}
.picker-item {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
}
</style>
